<template>
    <div class="comment" ref="commentRef">
        <div class="comment-position">
            <transition name="commentDown">
                <div class="positionR comment-position-conent" v-if="showComment">
                    <div class="no-wcomment" v-if="commentList.list && commentList.list.length == 0">
                        <span>
                            <img class="no-comment disabled" :src="staticImageUrl('/images/look/no_comment_list.png')"
                                 alt="">
                            <p class="no-comment-text">暂无评论哦，快来抢沙发吧！</p>
                        </span>
                    </div>
                    <scroller
                            ref="myscroller"
                            :on-refresh="refresh"
                            :on-infinite="infinite">
                        <ul class="comment-list" v-if="commentList.list && commentList.list.length != 0">
                            <li class="comment-item" v-for="(commentItem,mainkey) of commentList.list">
                                <div class="positionR comment-citem">
                                        <span class="comment-name">
                                            <span class="comment-cname">{{commentItem.userName}}</span>
                                            <span class="comment-self-mark"
                                                  v-if="commentItem.belongKey == userId">自己</span>
                                        </span>
                                    <span class="comment-item-right">
                                            <span class="comment-time">{{commentItem.timeStr}}</span>
                                            <span class="comment-icon-wpraise">
                                                <img v-if="!commentItem.hadLiked"
                                                     @click.prevent="isLike({isLike:true,likeType:commentItem.belongType,likeKey:commentItem.id,mainkey:mainkey})"
                                                     class="comment-icon-praise"
                                                     :src="staticImageUrl('/images/look/icon_collect_gray.png')" alt="">
                                                <img v-else
                                                     @click.prevent="isLike({isLike:false,likeType:commentItem.belongType,likeKey:commentItem.id,mainkey:mainkey})"
                                                     class="comment-icon-praise"
                                                     :src="staticImageUrl('/images/look/icon_collect_red.png')" alt="">
                                                <span class="praise-num">{{commentItem.likeNum > 10000 ? parseInt( commentItem.likeNum/ 10000 ) + 'w+' : commentItem.likeNum}}</span>
                                            </span>
                                        </span>
                                </div>
                                <div class="comment-one-floor-text"
                                     @click="dealComment({userName:commentItem.userName,mainId:commentItem.id,belongType:commentItem.belongType})">
                                    {{commentItem.content}}
                                    <!--删除评论、举报评论等等，暂时注释掉-->
                                    <!--<ul class="comment-deal" v-if="isShowCommentDeal">-->
                                    <ul class="comment-deal" v-if="false">
                                        <li class="comment-deal-item"
                                            @click="$emit('deleteComment',{mainId:commentItem.mainId})">删除评论
                                        </li>
                                    </ul>
                                </div>
                                <div>
                                        <span v-if="commentItem.commentedNum > 0" class="commont-pick-up"
                                              @click="showSubComment({mainId:commentItem.id,index:mainkey,pageNum:1})">
                                            <span v-if="showSubIndex == mainkey">
                                                收起评论
                                                <span class="iconfont icon-arrows_up1"></span>
                                            </span>
                                            <span v-else>
                                                查看{{commentItem.commentedNum}}条评论
                                                <span class="iconfont icon-arrows_down"></span>
                                            </span>
                                        </span>
                                    <div class="animated-slide"
                                         v-if="showSubIndex == mainkey && commentItem.children && commentItem.children.list && commentItem.children.list.length > 0">
                                        <ul class="comment-sub-list">
                                            <li class="comment-sub-item"
                                                v-for="(subCommentItem,subKey) in commentItem.children.list">
                                                <div class="positionR comment-citem">
                                                        <span class="comment-name">
                                                            <span class="comment-cname">{{subCommentItem.userName}} <span
                                                                    class="comment-cname"
                                                                    v-if="subCommentItem.atUserId">@{{subCommentItem.atUserName}}</span></span>
                                                            <span class="comment-self-mark"
                                                                  v-if="subCommentItem.belongKey == userId">自己</span>
                                                        </span>
                                                    <span class="comment-item-right">
                                                            <span class="comment-time">{{subCommentItem.timeStr}}</span>
                                                            <span class="comment-icon-wpraise">
                                                                <img v-if="!subCommentItem.hadLiked"
                                                                     @click.prevent="isLike({isLike:true,likeType:subCommentItem.belongType,likeKey:subCommentItem.id,subKey:subKey,mainkey:mainkey})"
                                                                     class="comment-icon-praise"
                                                                     :src="staticImageUrl('/images/look/icon_collect_gray.png')"
                                                                     alt="">
                                                                <img v-else
                                                                     @click.prevent="isLike({isLike:false,likeType:subCommentItem.belongType,likeKey:subCommentItem.id,subKey:subKey,mainkey:mainkey})"
                                                                     class="comment-icon-praise"
                                                                     :src="staticImageUrl('/images/look/icon_collect_red.png')"
                                                                     alt="">
                                                                <span class="praise-num">{{subCommentItem.likeNum > 10000 ? parseInt( subCommentItem.likeNum/ 10000 ) + 'w+' : subCommentItem.likeNum}}</span>
                                                            </span>
                                                        </span>
                                                </div>
                                                <div class="">
                                                    <p @click="dealComment({userName:subCommentItem.userName,mainId:commentItem.id,subId:subCommentItem.id,belongType:commentItem.children.belongType})"
                                                       class="comment-one-floor-text">{{subCommentItem.content}}</p>
                                                </div>
                                            </li>
                                            <li v-if="commentItem.children.totalPages > commentItem.children.curPage">
                                                    <span class="sub-check-more"
                                                          @click="checkMore({mainId:commentItem.id,pageNum: commentItem.children.curPage})">
                                                        查看更多
                                                    </span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </scroller>
                    <div class="comment-bottom-winput">
                        <label for="bottomTextArea" class="comment-wtextarea">
                            <textarea ref="bottomTextArea" name="bottomTextArea" id="bottomTextArea"
                                      @focus="getInputFocus"
                                      @blur="iosBlur" class="input-comment" v-model="commentVal" rows=1 cols=40
                                      placeholder="写点让TA高兴的话吧"></textarea>
                        </label>
                        <span class="comment-send-btn" @click="sendComment">发送</span>
                    </div>
                </div>
            </transition>
            <transition name="commentBordShow"
                        enter-active-class="animated fadeIn">
                <v-bord v-if="commentBordShow">
                    <div @click="closeComment" slot="cantClick" class="com_black"></div>
                </v-bord>
            </transition>
        </div>
    </div>
</template>

<script>
    export default {
        name: "CommentList",
        props: {
            commentListProps: {
                type: Object,
            },
            subCommentList: Object,
        },
        data() {
            return {
                commentList: {
                    "totalPages": 1,
                    "totalCount": 1,
                    "curPage": 1,
                    "list": [
                        {
                            "id": 0,
                            "belongType": "",
                            "belongKey": 0,
                            "userName": "",
                            "userPhoto": "",
                            "content": "",
                            "commentedNum": 0,
                            "likeNum": 0,
                            "hadLiked": false,
                            "timeStr": "",
                            children: {
                                "totalPages": 1,
                                "totalCount": 1,
                                "curPage": 1,
                                "list": [
                                    {
                                        "id": 0,
                                        "belongType": "",
                                        "belongKey": 0,
                                        "userName": "",
                                        "atUserId": 0,
                                        "atUserName": "",
                                        "content": "",
                                        "commentedNum": 0,
                                        "likeNum": 0,
                                        "hadLiked": false,
                                        "timeStr": "0"
                                    }
                                ]
                            }
                        }
                    ]
                },
                commentVal: '',
                isShowCommentDeal: false,
                nowMainId: -1,
                nowSubId: -1,
                showSubIndex: -1,
                commentListcurPage: 1,
                subCommentListcurPage: 1,
                timer: '',
                commentType: -1,
                commentBordShow: false,//蒙版
                showComment: false,
            }
        },
        mounted() {
            this.commentList = Object.assign({}, this.commentList, this.commentListProps);
            this.commentBordShow = true;
            this.showComment = true;
            this.$refs.commentRef.addEventListener('touchstart', function (e) {
                e.stopPropagation();
            })
        },
        methods: {
            /*ios弹出框不自动缩下去的兼容*/
            getInputFocus() {
                let timer = null;
                let that = this;
                let i = 0;
                if(this.isIphone){
                    clearInterval(timer);
                    timer = setInterval(function () {
                        if (i <= 10) {
                            document.body.scrollTop = document.body.scrollHeight;
                            i++
                        } else {
                            clearInterval(timer);
                        }
                    }, 10)
                }
            },
            /*点赞*/
            isLike(obj) {
                if (obj && Object.keys(obj).includes('subKey')) {
                    if (obj.isLike) {
                        this.commentList.list[obj.mainkey].children.list[obj.subKey].likeNum++;
                        this.commentList.list[obj.mainkey].children.list[obj.subKey].hadLiked = true;
                    } else {
                        this.commentList.list[obj.mainkey].children.list[obj.subKey].likeNum--;
                        this.commentList.list[obj.mainkey].children.list[obj.subKey].hadLiked = false;
                    }
                } else if (obj && !Object.keys(obj).includes('subKey')) {
                    if (obj.isLike) {
                        this.commentList.list[obj.mainkey].likeNum++;
                        this.commentList.list[obj.mainkey].hadLiked = true;
                    } else {
                        this.commentList.list[obj.mainkey].likeNum--;
                        this.commentList.list[obj.mainkey].hadLiked = false;
                    }
                }
                this.$emit('isLike', obj)
            },
            /*关闭的动画*/
            closeComment() {
                this.showComment = false;
                setTimeout(() => {
                    this.$emit('closeComment')
                }, 300)
            },
            /*进行评论*/
            dealComment(dealMsg) {
                let that = this;
                let tempDealMsg = Object.assign({}, {
                    content: that.commentVal,
                    mainId: -1,
                    subId: -1,
                    userName: ''
                }, dealMsg);
                this.nowMainId = tempDealMsg.mainId;
                this.nowSubId = tempDealMsg.subId;
                this.commentType = tempDealMsg.belongType;
                this.$refs.bottomTextArea.placeholder = "@" + tempDealMsg.userName;
            },
            showSubComment(obj) {
                if (this.showSubIndex < 0 || obj && obj.index != this.showSubIndex) {
                    if (this.commentList.list[obj.index] && !Object.keys(this.commentList.list[obj.index]).includes('children')) {
                        this.$emit('getSubCommentList', {mainId: obj.mainId, subId: -1, pageNum: obj.pageNum})
                    }
                    this.showSubIndex = obj.index;
                } else {
                    this.showSubIndex = -1;
                }
            },
            showSonComment(obj) {
                let that = this;
                that.showSubIndex = obj.index;
                this.$emit('getSubCommentList', {mainId: obj.mainId, subId: -1})
            },
            toScrollTop() {
                this.$refs.myscroller.scrollTo(0, 0, true);
            },
            checkMore(obj) {
                this.$emit('getSubCommentList', {mainId: obj.mainId, isMore: true, pageNum: ++obj.pageNum});
            },
            sendComment() {
                let that = this;
                let cb = function () {
                    if (that.nowMainId < 0) {
                        that.showSubIndex++;
                    }
                    /*主评论*/
                    /*关闭*/
                    if (that.nowSubId < 0) {
                        that.$refs.myscroller.scrollTo(0, 0, true);
                        /*关闭所有子评论*/
                        that.showSubIndex = -1;
                        /*打开子评论*/
                        for (let value in that.commentList.list) {
                            if (that.commentList.list[value].id == that.nowMainId) {
                                that.commentList.list[value].commentedNum++;
                                that.showSubIndex = value;
                            }
                        }
                    } else if (that.nowMainId > 0 && that.nowSubId >= 0) {
                        /*子评论*/
                        that.showSubIndex == that.nowMainId;
                        // this.commentList.list[]
                    }
                    that.nowMainId = -1;
                    that.nowSubId = -1;
                    that.commentType = -1;
                    that.commentVal = '';
                    that.$refs.bottomTextArea.placeholder = "写点让TA高兴的话吧";
                };
                this.$emit('doComment', {
                    content: that.commentVal,
                    mainId: that.nowMainId,
                    subId: that.nowSubId,
                    belongType: this.commentType,
                    cb: cb
                });
            },
            /*下拉刷新*/
            refresh(done) {
                setTimeout(() => {
                    this.$emit('getUserMainComment');
                    this.showSubIndex = -1;
                    this.$refs.myscroller.finishPullToRefresh();//刷新完毕关闭刷新的转圈圈
                }, 500)
            },
            /*上啦加载*/
            infinite() {
                this.$refs.myscroller.finishInfinite(true);//刷新完毕关闭刷新的转圈圈
                this.commentListcurPage = this.commentList.curPage;
                if (this.commentListcurPage >= this.commentList.totalPages) {
                    return false;
                }
                this.commentListcurPage++;
                this.$emit('getUserMainComment', {checkCurPage: this.commentListcurPage, isLoadingMore: true});
            }
        },
        components: {
            'v-bord': () => import('../alert/Bord')
        },
        watch: {
            commentListProps(val) {
                this.commentList = Object.assign({}, this.commentList, val);
            },
        }
    }
</script>

<style scoped lang="scss">
    .comment {
        background-color: transparent;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 3.75rem;
        width: 100vw;
        z-index: 1060;
        max-height: 75vh;
        height: 5.35rem;
    }

    .comment-position {
        background-color: transparent;
        position: relative;
        height: 100%;
    }

    .animated-slide {
        -webkit-transition: all 500ms;
        -moz-transition: all 500ms;
        -o-transition: all 500ms;
        transition: all 500ms;
        /*-webkit-animation:animatedSlide .3s linear;*/
        /*-o-animation: animatedSlide .3s linear ;*/
        /*animation: animatedSlide .3s linear ;*/
    }

    .comment-position-conent {
        height: 100%;
        z-index: 1050;
        background-color: #fff;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        overflow: hidden;
    }
    .commentDown-leave-active {
        /*bottom: -5.5rem;*/
        -webkit-transform: translateY(100%);
        -moz-transform: translateY(100%);
        -ms-transform: translateY(100%);
        -o-transform: translateY(100%);
        transform: translateY(100%);
        transition: all .2s linear;
    }

    .commentDown-enter-active {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
        transition: all .2s linear;
    }

    .commentDown-enter, .slideBottom-leave-to {
        -webkit-transform: translateY(100%);
        -moz-transform: translateY(100%);
        -ms-transform: translateY(100%);
        -o-transform: translateY(100%);
        transform: translateY(100%);
    }

    .no-wcomment {
        position: relative;
        z-index: 1060;
        background-color: #fff;
        width: 3.75rem;
        width: 100vw;
        height: 5.5rem;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-align-items: center;
        align-items: center;
        background-image: unset!important;
        .no-comment {
            width: 1.8rem;
            height: 1.8rem;
        }

        .no-comment-text {
            color: #525866;
            text-align: center;
            padding-top: .2rem;
        }
    }

    .comment-list {
        position: relative;
        z-index: 1060;
        background-color: #fff;
        width: 3.75rem;
        width: 100vw;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        padding: 0 .15rem;
        overflow: auto;

        .comment-item:last-child {
            border-bottom: none;
        }
    }

    .comment /deep/ .com_black {
        position: absolute;
        top: -50%;
        background-color: rgba(0, 0, 0, .5);
    }

    .comment-bottom-winput {
        position: absolute;
        bottom: 0;
        left: 0;
        height: .49rem;
        background-color: #F5F5F5;
        width: 100%;
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: center;
        align-items: center;
        padding: 0 .1rem;
        z-index: 1060;
    }

    .comment-send-btn {
        display: inline-block;
        width: .5rem;
        height: .24rem;
        line-height: .24rem;
        color: #fff;
        text-align: center;
        background-color: #8BA9E8;
        border-radius: .25rem;
        font-size: .12rem;
    }

    .input-comment {
        outline: none;
        background-color: #F5F5F5;
        width: 100%;
        border: none;
        color: #000;
        top: 50%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        position: relative;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .comment-wtextarea {
        position: relative;
        height: .49rem;
        -webkit-flex: 1;
        flex: 1;
    }

    .comment-name {
        color: #999;
        font-size: .13rem;
        -webkit-flex: 1;
        flex: 1;
    }

    .comment-self-mark {
        font-size: .1rem;
        display: inline-block;
        background-color: #8BA9E8;
        color: #fff;
        padding: 0 .01rem;
        margin-left: .03rem;
    }

    .comment-time {
        font-size: .1rem;
        color: #999;
        padding-right: .1rem;
        padding-left: .15rem;
    }

    .comment-one-floor-text {
        color: #4D4D4D;
        font-size: .14rem;
        padding: .03rem 0;
        position: relative;
    }

    .comment-deal {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto;
        background-color: #fff;
        width: 1rem;
        height: .3rem;
        line-height: .26rem;
        text-align: center;
        border-radius: .05rem;
        padding: .02rem .1rem;
        -webkit-box-shadow: 0 0 .05rem #ccc;
        -moz-box-shadow: 0 0 .05rem #ccc;
        box-shadow: 0 0 .05rem #ccc;
    }

    .commont-pick-up {
        font-size: .11rem;
        color: #999;
    }

    .comment-icon-wpraise {
        width: .32rem;
        position: absolute;
        right: -.2rem;
        top: -.06rem;
        bottom: 0;
        margin: auto;

        .comment-icon-praise {
            width: .32rem;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            padding: .1rem .1rem 0 .1rem;
        }
    }

    .comment-item-right {
        float: right;
    }

    .comment-item {
        padding-top: .2rem;
        padding-right: .25rem;
        padding-bottom: .2rem;
        border-bottom: 1px solid #F0F0F0;
    }

    .praise-num {
        color: #999;
        display: inline-block;
        white-space: nowrap;
        position: relative;
        left: 50%;
        margin-left: -50;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }

    .comment-citem {
        display: -webkit-flex;
        display: flex;
    }

    .comment-sub-list {
        padding-left: .1rem;
    }

    .comment-sub-item {
        padding-bottom: 0;
        padding-top: .2rem;
    }

    .icon-arrows_up1, .icon-arrows_down {
        position: relative;
        top: .01rem;
        left: -.01rem;
    }

    .sub-check-more {
        color: #999;
        padding: .1rem 0;
    }
</style>